import HighLight from "@/components/HighLight";
import ImageViewer from "@/components/ImageViewer";
import { share } from "@/components/Share";
import { IShareItem } from "@/types";
import { useEffect } from "react";
import { ArticleModelState, IRouteComponentProps, useDispatch, useSelector } from "umi";
import styles from './index.less';
import cls from 'classnames';

const ArticleDetail: React.FC<IRouteComponentProps<{id: string}>> = ({match})=>{
  const id = match.params.id;
  // 通过useSelector获取model数据
  const {articleDetail} = useSelector((state: { article: ArticleModelState}) => state.article);
  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();

  useEffect(()=>{
    dispatch({
      type: 'article/getArticleDetail',
      payload: id
    })
  }, []);

  function shareArticle(){
    share(articleDetail as IShareItem)
  }

  return <div className={cls("container")}>
    {/* 文章操作 */}
    <div>
      <button onClick={shareArticle}>分享</button>
    </div>
    {/* 文章详情 */}
    <article className={styles.article}>
      <ImageViewer>
        <HighLight>
          <img src={articleDetail.cover} alt="" />
          <p>{articleDetail.title}</p>
          <div dangerouslySetInnerHTML={{__html: articleDetail.html!}}></div>
        </HighLight>
      </ImageViewer>
    </article>

    {/* 推荐阅读 */}
  </div>
}

export default ArticleDetail;
